<template>
    <view class="container">
        <canvas canvas-id="circleCanvas" id="circleCanvas" class="canvas"></canvas>
    </view>
</template>

<script>

export default {
    name: 'upgradeAnimation',
    props: {
        good: {
            type: Object,
            required: true
        },
        amount: {
            type: Number,
            required: true
        },
        isSuccess: {
            type: Boolean,
            required: true
        }
    },
    data() {
        return {
            windowsWidth: 0,
            progress: 0,
            targetProgress: 0,
            color: '#009900',
            canvasWidth: 0,
            lineWidth: 20,
            frameInterval: 2000, // 每帧的时间间隔，大约60FPS
            step: 0.25 // 每帧增加的进度值
        };
    },
    mounted() {
        console.log(this.amount);
        this.windowsWidth = this.$store.getters.getWindowsWidth;
        this.canvasWidth = this.$store.getters.getWindowsWidth * 0.75;
        this.drawCircle(this.progress);
        this.setProgress();
        document.documentElement.style.setProperty('--windows-width', this.windowsWidth + 'px');
    },
    methods: {
        drawCircle(progress) {
            const ctx = uni.createCanvasContext('circleCanvas', this);
            const radius = this.canvasWidth / 2 - this.lineWidth;

            // 清除画布
            ctx.clearRect(0, 0, this.canvasWidth, this.canvasWidth);

            // 绘制背景圆环
            ctx.beginPath();
            ctx.arc(this.canvasWidth / 2, this.canvasWidth / 2, radius, 0, 2 * Math.PI);
            ctx.setStrokeStyle('#ddd');
            ctx.setLineWidth(this.lineWidth);
            ctx.stroke();

            // 绘制进度圆环
            ctx.beginPath();
            ctx.arc(this.canvasWidth / 2, this.canvasWidth / 2, radius, -Math.PI / 2, 2 * Math.PI * progress - Math.PI / 2);
            ctx.setStrokeStyle(this.color);
            ctx.setLineWidth(this.lineWidth);
            ctx.stroke();

            // 绘制中心图片
            const newWidth = this.canvasWidth / 5 * 4;
            const newHeight = this.canvasWidth / 5 * 3; // 根据宽度计算新的高度
            const imageX = this.canvasWidth / 2 - newWidth / 2;
            const imageY = this.canvasWidth / 2 - newHeight / 2;
            ctx.drawImage(this.good.image, imageX, imageY, newWidth, newHeight);


            ctx.draw();
        },
        setProgress() {
            setTimeout(() => {
                this.targetProgress = this.amount / 100;
                if (!this.isSuccess) {
                    this.color = '#fc3d49';
                    this.drawCircle(this.targetProgress);
                    setTimeout(() => {
                        this.$emit('close-animation');
                    }, 500);
                } else {
                    this.animateProgress().then(() => {
                        setTimeout(() => {
                            this.$emit('close-animation');
                        }, 500);
                    });
                }
            }, 200)

        },
        async animateProgress() {
            return new Promise((resolve) => { // 添加Promise来控制动画完成
                const animateStep = () => {
                    if (this.progress < this.targetProgress) {
                        this.progress += this.step;
                        if (this.progress > this.targetProgress) {
                            this.progress = this.targetProgress;
                        }
                        this.drawCircle(this.progress);
                        setTimeout(animateStep, this.frameInterval);
                    } else {
                        resolve(); // 动画到达目标时解决Promise
                    }
                };
                setTimeout(animateStep, 200); // 启动动画步骤
            });
        }
    }
};

</script>

<style>

.container {
    //width: 100%;
    //height: 100%;
    //margin: 0 auto;

    .canvas {
        //width: var(--windows-width);
        height: var(--windows-width);
        margin: 0 auto;
    }
}


</style>
